<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>

<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :md="24" :lg="8">
            <Row class-name="home-page-row1" :gutter="10">
                <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                <Card>
                    <Row type="flex" class="user-infor">
                        <Col span="8">
                        <Row class-name="made-child-con-middle" type="flex" align="middle">
                            <img class="avator-img" :src="avatarPath" />
                        </Row>
                        </Col>
                        <Col span="16" style="padding-left:6px;">
                        <Row class-name="made-child-con-middle" type="flex" align="middle">
                            <div>
                                <b class="card-user-infor-name">{{ username }}</b>
                                <p>X-Boot 欢迎您的使用</p>
                            </div>
                        </Row>
                        </Col>
                    </Row>
                    <div class="line-gray"></div>
                    <Row class="margin-top-8">
                        <Col span="8">
                        <p class="notwrap">本次登录地点:</p>
                        </Col>
                        <Col span="16" class="padding-left-8">{{city}}</Col>
                    </Row>
                    <Row class="margin-top-8">
                        <Col span="8">
                        <p class="notwrap">天气:</p>
                        </Col>
                        <Col span="16" class="padding-left-8">{{weather}}</Col>
                    </Row>
                </Card>
                </Col>
                <Col :md="12" :lg="24" style="margin-bottom: 10px;">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="logo-github" size="20" style="margin-bottom:3px;" />
                        <a href="https://github.com/Exrick/x-boot" target="_blank">
                            X-Boot Github开源版本地址
                        </a>
                    </p>
                    <div class="to-do-list-con">
                        <Timeline>
                            <TimelineItem>
                                <Icon type="logo-youtube" color="#fb7299" slot="dot"></Icon>
                                <a @click="showVideo=true">作者亲自制作XBoot文字快闪宣传片 点我观看
                                </a>
                            </TimelineItem>
                            <TimelineItem>
                                <Icon type="logo-youtube" color="#fb7299" slot="dot"></Icon>
                                <a href="https://www.bilibili.com/video/av23121122/" target="_blank">作者亲自制作各项目宣传视频 点我观看
                                </a>
                            </TimelineItem>
                            <TimelineItem>
                                <Icon type="md-barcode" color="black" slot="dot"></Icon>
                                <a href="https://github.com/Exrick/Machine-Learning" target="_blank">个人机器学习笔记
                                </a>
                            </TimelineItem>
                            <TimelineItem>
                                <Icon type="md-cart" color="#f4364c" slot="dot"></Icon>
                                <a href="http://xmall.exrick.cn" target="_blank">XMall开源分布式商城
                                </a>
                            </TimelineItem>
                            <TimelineItem>
                                <Icon type="md-cash" color="#19be6b" slot="dot"></Icon>
                                <a href="http://xpay.exrick.cn" target="_blank">XPay开源个人免签支付系统
                                </a>
                            </TimelineItem>
                            <TimelineItem>
                                <Icon type="md-people" color="#57a3f3" slot="dot"></Icon>
                                QQ交流群 475743731(付费) 562962309(免费)
                            </TimelineItem>
                        </Timeline>
                    </div>
                </Card>
                </Col>
            </Row>
            </Col>
            <Col :md="24" :lg="16">
            <Row :gutter="5">
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card id-name="user_created_count" :end-val="count.createUser" iconType="md-person-add" color="#2d8cf0" intro-text="今日新增用户"></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card id-name="visit_count" :end-val="count.visit" iconType="ios-eye" color="#64d572" :iconSize="50" intro-text="今日浏览量"></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card id-name="collection_count" :end-val="count.collection" iconType="md-cloud-upload" color="#ffd572" intro-text="今日数据采集量"></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card id-name="transfer_count" :end-val="count.transfer" iconType="md-shuffle" color="#f25e43" intro-text="今日服务调用量"></infor-card>
                </Col>
            </Row>
            <Row>
                <Col :md="24" :lg="12" style="padding: 0 2px 10px 0;">
                <Card>
                    <p slot="title" class="card-title" style="overflow:visible">
                        <a href="http://xpay.exrick.cn/pay?xboot" target="_blank">
                            <Icon type="ios-star" size="20" style="margin-bottom:2px"></Icon>
                            <Badge dot>JingGo 项目简介</Badge>
                        </a>
                    </p>
                    <div>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">代码拥有详细注释 无复杂逻辑 核心使用 SpringBoot 2.0.4.RELEASE</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">JPA + Mybatis-Plus任意切换</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">操作日志记录方式任意切换Mysql或Elasticseach记录</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">极简代码生成 只需输入类名和字段 自动创建数据库表</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">动态权限管理 菜单按钮权限+数据权限配置</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">支持社交账号、短信等多方式登录 不干涉原用户数据 实现第三方账号管理</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">基于Websocket消息推送管理、基于Quartz定时任务管理</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">极简代码生成 只需输入类名和字段 自动创建数据库表</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">后台提供分布式限流、同步锁、验证码等工具类 前端提供空白Vue模版</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">可动态配置SSO、短信、邮件、Vaptcha验证码等</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">七牛云文件存储服务</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Mob全国天气预报接口：需注册账号创建应用后申请填入AppKey后免费使用</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">第三方社交账号登录配置(为实现)</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Jasypt：配置文件加密(thymeleaf作者开发)</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Thymeleaf：发送模版邮件使用</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Quartz：定时任务</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Druid：阿里高性能数据库连接池 Druid配置官方中文文档</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Swagger2：Api文档生成</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Json Web Token(JWT)</span></Checkbox>
                        <Checkbox v-model="disabledSingle" disabled><span class="origin">Vaptcha人机验证码</span></Checkbox>
                       <!-- <div class="qr">
                            <img src="@/assets/qr.png" width="150">
                            <div>支持手机扫码支付，限时优惠！<br>赠送
                                <a href="https://v.qq.com/x/page/f0627kf4x1e.html" target="_blank">XMall小程序(不含后台)</a> +
                                <a href="https://github.com/Exrick/xpay" target="_blank">XPay个人收款支付系统v1.2</a>
                            </div>
                        </div>
                        <div class="flex">
                            完整版需捐赠(仅供学习)：
                            <span class="rmb">￥</span> <span class="price">68</span>
                            <span class="origin">￥</span><s class="origin">88</s>
                            <Button to="http://xpay.exrick.cn/pay?xboot" target="_blank" type="error" icon="md-paper-plane" style="margin-left:10px;">立即获取</Button>
                        </div>
                        <div class="flex">
                            商用授权价格：
                            <span class="rmb">￥</span> <span class="price">368</span>
                            <span class="origin">￥</span><s class="origin">398</s>
                            <Button to="http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes" target="_blank" type="warning" icon="logo-vimeo" style="margin-left:10px;">获取商用授权</Button><br>
                        </div>
                        <Alert style="padding: 8px 16px 8px 16px;">
                            支付后源码和更新维护群将自动发至您在支付页面所填写的邮箱，
                            开源版本请遵循GPLv3.0开源协议，不得闭源，商用需求请联系作者签署授权协议。
                            价格可能随功能逐渐完善或物价变化。
                        </Alert>-->
                    </div>
                </Card>
                </Col>
                <Col :md="24" :lg="12" style="padding: 0 0 10px 2px;" >
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="md-bookmark"></Icon>
                        ISSUE
                    </p>
                    <div id="comments" style="height:365px;overflow:auto;" class="inner-container"></div>
                </Card>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row :gutter="10" class="margin-top-10">
            <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="md-map"></Icon>
                    每日来访量统计
                </p>
                <div class="data-source-row">
                    <visite-volume></visite-volume>
                </div>
            </Card>
            </Col>
            <Col :md="24" :lg="16" :style="{marginBottom: '10px'}">
            <Card :padding="0">
                <p slot="title" class="card-title">
                    <Icon type="md-locate"></Icon>
                    今日服务调用地理分布
                </p>
                <div class="map-con">
                    <Col span="10">
                    <map-data-table :cityData="cityData" height="281" :style-obj="{margin: '12px 0 0 11px'}"></map-data-table>
                    </Col>
                    <Col span="14" class="map-incon">
                    <Row type="flex" justify="center" align="middle">
                        <home-map :city-data="cityData"></home-map>
                    </Row>
                    </Col>
                </div>
            </Card>
            </col>
        </Row>
        <Modal
                v-model="showVideo"
                title="作者亲自制作XBoot炫酷文字快闪宣传片"
                :styles="{top: '30px'}"
                width="1000"
        >
            <iframe src="//player.bilibili.com/player.html?aid=30284667&cid=52827707&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width:100%;height:550px;"> </iframe>
            <div slot="footer">
            </div>
        </Modal>
    </div>
</template>

<script>
    import { ipInfo } from "@/api/index";
    import cityData from "./map-data/get-city-value.js";
    import homeMap from "./components/map.vue";
    import visiteVolume from "./components/visiteVolume.vue";
    import userFlow from "./components/userFlow.vue";
    import countUp from "./components/countUp.vue";
    import inforCard from "./components/inforCard.vue";
    import mapDataTable from "./components/mapDataTable.vue";
    import Cookies from "js-cookie";
    import "gitment/style/default.css";
    import Gitment from "gitment";

    export default {
        name: "home",
        components: {
            homeMap,
            visiteVolume,
            userFlow,
            countUp,
            inforCard,
            mapDataTable
        },
        data() {
            return {
                showVideo: false,
                count: {
                    createUser: 496,
                    visit: 3264,
                    collection: 24389305,
                    transfer: 39503498
                },
                cityData: cityData,
                newToDoItemValue: "",
                city: "",
                weather: "",
                username: "",
                disabledSingle: true
            };
        },
        computed: {
            avatarPath() {
                return localStorage.avatorImgPath;
            }
        },
        methods: {
            init() {
                let userInfo = JSON.parse(Cookies.get("userInfo"));
                this.username = userInfo.username;
                ipInfo().then(res => {
                    if (res.success === true) {
                        let ipInfo = JSON.parse(res.result);
                        if (ipInfo.retCode === "200") {
                            let info = ipInfo.result[0];
                            let weather =
                                info.weather +
                                " " +
                                info.temperature +
                                " 污染指数: " +
                                info.pollutionIndex;
                            this.city = info.city;
                            this.weather = weather;
                        } else {
                            this.city = "未知";
                            this.weather = "未知";
                        }
                    }
                });
            }
        },
        mounted() {
            this.init();
            const gitment = new Gitment({
                id: "xboot", // optional
                owner: "Exrick",
                repo: "xboot-comments",
                oauth: {
                    client_id: "a128de2dd7383614273a",
                    client_secret: "a77691ecb662a8303a6c686ae651ae035868da6e"
                }
            });
            gitment.render("comments");
            // 宣传视频
            /*let xbootVideo = Boolean(Cookies.get('xbootVideo'));
            if(!xbootVideo){
                this.showVideo = true;
                Cookies.set('xbootVideo', true);
            }*/
        }
    };
</script>
